<template>
  <div class="home-top">
    <NavHeader />
    <el-carousel height="100vh" motion-blur arrow="always">
      <el-carousel-item v-for="item in imglist" :key="item">
        <img class="home-top-bgimg" style="width: 100%" :src="item.path" />
        <div class="home-top-tle">
          <h1>{{ item.tle1 }}</h1>
          <h3>
            {{ item.tle2 }}
          </h3>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="home-description">
    <div class="home-description-box">
      <h1>西安友盟智能科技</h1>
      <h3>
        西安友盟智能科技有限公司（2021年成立，简称：友盟智能科技）是一家专注从事企业数据治理、数据共享以及数据服务的高新科技公司，公司业务涉及医疗、医药、金融、教育、政务、电力、通信等多个行业。<br />
      </h3>
      <h3>
        目前公司运用云计算、大数据及人工智能技术，已为医药、医疗、大健康等行业提供简单、安全、高效、合规的信息智能化解决方案。同时公司自主研发“渠道数据采集系统、销量地图管理系统、辖区备案管理系统、辖区指标管理系统、企业主数据管理系统、道数据清洗系统、渠道数据申诉系统、经销商管理系统、渠道数据分析系统、IDS统一身份认证系统、SSO单点登录系统”等多款核心产品，并建立了完善的客户终端主数据采集、终端主数据处理和管理的全套流程，满足企业数字化的主要业务要求。
      </h3>
      <div class="home-description-box-num">
        <div
          class="home-description-box-num-item"
          v-for="(item, index) in descriptionlist"
        >
          <div class="home-description-box-num-item-top">
            <div class="home-description-box-num-item-top-l">
              {{ item.num }}
            </div>
            <div class="home-description-box-num-item-top-r">+</div>
          </div>
          <div class="home-description-box-num-item-bottom">
            {{ item.text }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="home-card">
    <div class="home-card-item" v-for="(item, index) in cardList">
      <div class="home-card-item-imgbox">
        <img class="home-card-item-imgbox-img" :src="item.path" />
      </div>
      <div class="home-card-item-tle">{{ item.tle }}</div>
      <div class="home-card-item-line"></div>
      <div class="home-card-item-tleDesc" v-for="(ele, index) in item.tleDesc">
        {{ ele }}
      </div>
    </div>
  </div>
  <div class="home-example">
    <div class="home-example-box">
      <h1>案例展示</h1>
      <h3>
        您的满意，见证专业魅力。经验厚实，策划精妙，执行到位，服务优质，尽显专业风采
      </h3>
      <el-carousel height="40vh" motion-blur arrow="always">
        <el-carousel-item style="padding: 20px 120px">
          <div class="home-example-box-itembox">
            <div
              class="home-example-box-itembox-item"
              v-for="(item, index) in exampleList"
              @click="godetailPage(index + 1)"
            >
              <div class="home-example-box-itembox-item-title">
                {{ item.title }}
              </div>
              <div class="home-example-box-itembox-item-desc">
                {{ item.desc.split("，")[0] }}
              </div>
              <img :src="item.path" />
              <div class="home-example-box-itembox-desc">
                【{{ item.title }}】{{ item.desc }}
              </div>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item style="padding: 20px 120px">
          <div class="home-example-box-itembox">
            <div
              class="home-example-box-itembox-item"
              v-for="(item, index) in exampleList2"
              @click="godetailPage(index + 4)"
            >
              <div class="home-example-box-itembox-item-title">
                {{ item.title }}
              </div>
              <div class="home-example-box-itembox-item-desc">
                {{ item.desc.split("，")[0] }}
              </div>
              <img :src="item.path" />
              <div class="home-example-box-itembox-desc">
                【{{ item.title }}】{{ item.desc }}
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <!-- <div class="home-example-box-itembox">
        <div
          class="home-example-box-itembox-item"
          v-for="(item, index) in exampleList"
          @click="godetailPage(index + 1)"
        >
          <img :src="item.path" />
          <div class="home-example-box-item-desc">{{ item.desc }}</div>
        </div>
      </div> -->
      <el-button color="#626aef" plain style="width: 80px" @click="goDetails"
        >更多></el-button
      >
    </div>
  </div>
  <BackTop />
  <pageBottom />
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";

import img1 from "@/assets/img/home/bg1.png";
import img2 from "@/assets/img/home/bg2.png";
import img3 from "@/assets/img/home/bg3.png";

import kq from "@/assets/img/example/hrkq.png";
import ai from "@/assets/img/example/aizs.png";
import sj from "@/assets/img/example/jtsj.png";
import cj from "@/assets/img/example/sjcj.png";
import zsj from "@/assets/img/example/sjgl.png";
import qx from "@/assets/img/example/sjqx.png";

import cardimg1 from "@/assets/img/home/aiapp.png";
import cardimg2 from "@/assets/img/home/yyapp.png";
import cardimg3 from "@/assets/img/home/custom.png";
import cardimg4 from "@/assets/img/home/delp.png";
const router = useRouter();

import NavHeader from "@/components/NavHeader.vue";
import pageBottom from "@/components/pageBottom.vue";
import BackTop from "@/components/BackTop.vue";
let exampleList = reactive([
  {
    path: cj,
    title: "渠道数据采集",
    desc: "多渠道数据汇聚，精准采集助力决策",
  },
  {
    path: zsj,
    title: "主数据管理",
    desc: "统一主数据管理，提升数据准确性",
  },
  {
    path: qx,
    title: "渠道数据清洗",
    desc: "智能清洗渠道数据，确保数据纯净高效",
  },
]);
let exampleList2 = reactive([
  {
    path: ai,
    title: "企业AI助手",
    desc: "智能AI助手，助力企业高效办公",
  },
  {
    path: kq,
    title: "HR考勤数据汇总",
    desc: "实时汇总考勤数据，提升HR管理效率",
  },
  {
    path: sj,
    title: "集团审计管理",
    desc: "全流程审计管理，保障集团运营合规",
  },
]);
let imglist = reactive([
  {
    path: img1,
    tle1: "引领智能时代，驱动企业未来",
    tle2: "从客户服务到市场营销，AI助力企业运营全面升级",
  },
  {
    path: img2,
    tle1: "精准营销，数据驱动",
    tle2: "通过渠道数据采集与分析，实现医药营销的智能化转型",
  },
  {
    path: img3,
    tle1: "专属解决方案，满足独特需求",
    tle2: "无论是APP、小程序还是网站建设，我们提供一站式定制化开发服务",
  },
]);
let descriptionlist = reactive([
  {
    num: "100",
    text: "完成项目",
  },
  {
    num: "500",
    text: "一起成长的客户",
  },
  {
    num: "200",
    text: "合作伙伴",
  },
]);
let cardList = reactive([
  {
    path: cardimg1,
    tle: "AI企业应用",
    tleDesc: ["客户服务", "运营管理", "市场营销", "企业大模型训练"],
  },
  {
    path: cardimg2,
    tle: "医药营销应用",
    tleDesc: ["渠道数据采集", "主数据管理", "渠道数据清洗", "渠道数据分析"],
  },
  {
    path: cardimg3,
    tle: "定制化开发",
    tleDesc: ["渠道数据中台", "APP开发", "小程序开发", "网站建设"],
  },
  {
    path: cardimg4,
    tle: "其他应用",
    tleDesc: [
      "HR考勤数据汇总系统",
      "审计管理系统",
      "舆情监控系统",
      "电商产品销量分析",
    ],
  },
]);
function goDetails() {
  router.push({
    name: "Example",
  });
}
const godetailPage = (i: number) => {
  if (i == 1) {
    // 渠道数据采集
    router.push({
      name: "Exampleitem2",
    });
  } else if (i == 2) {
    // 渠道数据采集
    router.push({
      name: "Exampleitem",
    });
  } else if (i == 3) {
    // 渠道数据清洗
    router.push({
      name: "Exampleitem3",
    });
  } else if (i == 4) {
    // AI分析助手
    router.push({
      name: "Exampleitem4",
    });
  } else if (i == 5) {
    // HR考勤数据汇总
    router.push({
      name: "Exampleitem5",
    });
  } else if (i == 6) {
    // 集团审计管理
    router.push({
      name: "Exampleitem6",
    });
  }
};
</script>
<style lang="scss" scoped>
:deep(.el-carousel) {
  width: 100%;
}
:deep(.el-carousel__arrow) {
  border: 1px solid #fff;
  font-size: 20px;
  height: 45px;
  width: 45px;
  &:hover {
    background-color: red;
  }
}
.home-top {
  height: 100vh;
  position: relative;
  &-bgimg {
    filter: brightness(50%);
  }
  &-tle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    h1 {
      margin-bottom: 20px;
      font-size: 40px;
      font-weight: 700;
    }
    h3 {
      font-size: 20px;
    }
  }
}
.home-description {
  // height: 50vh;
  background: linear-gradient(to bottom, #93d2f3, #fff);
  padding: 70px 0;
  &-box {
    width: 50%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;

    h1 {
      color: #000;
      margin-bottom: 30px;
    }
    h3 {
      color: #377f7f;
      text-indent: 2em;
      line-height: 35px;
      margin-bottom: 10px;
      text-align: left;
    }
    &-num {
      display: flex;
      justify-content: space-between;
      &-item {
        color: #6c6c6c;
        display: flex;
        flex-direction: column;
        &-top {
          display: flex;
          align-items: flex-end;
          text-shadow: 1px 5px 10px #6c6c6c;
          &-l {
            font-size: 70px;
            font-weight: 700;
          }
          &-r {
            font-size: 40px;
          }
        }
        &-bottom {
          font-size: 16px;
        }
      }
    }
  }
}
.home-card {
  background-image: url("@/assets/img/home/cardbg1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 70vh;
  padding: 100px 150px;
  display: flex;
  justify-content: space-between;
  &-item {
    width: 20%;
    height: 100%;
    background-image: url("@/assets/img/home/card1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 30px;
    font-weight: 700;
    transition: transform 0.3s ease-in-out;
    border-radius: 20px;
    &:hover {
      transform: scale(1.1);
      cursor: pointer;
    }
    &-imgbox {
      height: 20%;
      &-img {
        width: 25%;
        max-height: 100%;
      }
    }
    &-tle {
      text-align: center;
      font-size: 23px;
    }
    &-line {
      width: 40px;
      border-bottom: 1px solid #bbbbbb;
      margin: auto;
      margin-top: 20px;
    }
    &-tleDesc {
      text-align: center;
      margin: 20px 0;
    }
  }
}
.home-example {
  background: linear-gradient(to bottom, #93d2f3, #fff);
  padding: 80px 0;
  // padding-bottom: 100px;
  color: #000;
  &-box {
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    :deep(.el-carousel__arrow--right, ) {
      top: 50%;
    }
    :deep(.el-carousel__arrow--left) {
      top: 50%;
    }
    h1 {
      color: #000;
      margin-bottom: 30px;
    }
    h3 {
      color: #000;
      text-indent: 2em;
      line-height: 35px;
      margin-bottom: 30px;
    }
    &-desc {
    }
    &-itembox {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      border-radius: 20px;
      &-item {
        position: relative;
        background-color: #fff;
        width: 30%;
        transition: transform 0.3s ease-in-out;

        &:hover {
          transform: scale(1.1);
          cursor: pointer;
        }
        &-title {
          position: absolute;
          top: 12%;
          left: 7%;
          font-size: 24px;
          margin-bottom: 3px;
          font-weight: 700;
          color: #fff;
        }
        &-desc {
          position: absolute;
          top: 25%;
          left: 7%;
          font-size: 17px;
          color: #fff;
        }
      }
      img {
        width: 100%;
        height: 150px;
      }
      &-desc {
        width: 100%;
        padding: 30px;
        font-size: 24px;
        text-align: left;
      }
    }
  }
}
</style>
